<template>
  <div id="map"></div>
</template>
<script>
export default {
  data() {
    return {
      map: null,
      markers: [],
      polygonList: null,
      textList: null,
      infoWindow: null,
      dw: [],
      wz: [],
      onlineNumber: 0,
    };
  },
  created() {
    window
      .$loadScript(
        "js",
        "https://webapi.amap.com/maps?v=2.0&key=9f8e1526a1829056c58e00fa4e4e8f49"
      )
      .then(() => {
        this.init();
      });
  },
  watch: {
    dataChart: {
      handler(val) {
        if (val.data.length) {
          this.wz = val.data.allLBSList;
          this.onlineNumber = val.data.onlineNumber;
          if (this.map) {
            this.addPolygon();
            this.handleMarker();
          } else {
            setTimeout(() => {
              this.handleMarker();
              this.addPolygon();
            }, 500);
          }
        }
      },
      deep: true,
      immediate: true,
    },
    dw: {
      handler(val) {
        if (val) {
          this.dw = val;
          this.addPolygon();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    init() {
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        viewMode: "3D",
        layers: [new AMap.TileLayer.Satellite()],
        center: [120.261443, 29.274805],
        zoom: 15,
        expandZoomRange: true,
        zooms: [1, 20],
      });
    },
    getCenter(PolygonArr) {
      let total = PolygonArr.length;
      let X = 0;
      let Y = 0;
      let Z = 0;
      PolygonArr.forEach((lnglat) => {
        let lng = (lnglat[0] * Math.PI) / 180;
        let lat = (lnglat[1] * Math.PI) / 180;
        let x, y, z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      let Lng = Math.atan2(Y, X);
      let Hyp = Math.sqrt(X * X + Y * Y);
      let Lat = Math.atan2(Z, Hyp);
      return [(Lng * 180) / Math.PI, (Lat * 180) / Math.PI];
    },

    handleMarker() {
      if (this.markers.length) {
        this.map.remove(this.markers);
      }
      this.markers = [];
      let data = this.wz;
      let points = this.wz.map((item) => {
        return [item.point.lng, item.point.lat];
      });
      for (let i = 0; i < points.length; i++) {
        const icon = new AMap.Icon({
          size: new AMap.Size(19, 33),
          image:
            "https://fast-release.oss-cn-hangzhou.aliyuncs.com/upload/20240703/7de54baf35812bf26a16373d5f9bb068.png",
        });
        let marker = new AMap.Marker({
          icon,
          position: points[i],
          offset: new AMap.Pixel(-9.5, -16.5),
        });
        marker.on("click", (e) => {
          this.infoWindow = new AMap.InfoWindow({
            content: ` <div class="map-bubble">
    <div class="bubble-left">
      <img
        src=${data[i].avatar}
      />
    </div>
    <div class="bubble-rigth">
      <div class="bubble-li">${data[i].userName} ${data[i].jobName}</div>
      <div class="bubble-li">电量：${data[i].batterylevel * 100}%</div>
      <div class="bubble-li">${data[i].gmtUpload}</div>
    </div>
  </div>`,
          });
          this.infoWindow.open(this.map, [points[i][0], points[i][1]]);
          this.map.setCenter([points[i][0], points[i][1]]);
        });
        this.markers.push(marker);
        this.map.add(marker);
      }
    },
    addPolygon() {
      if (this.polygonList) {
        this.map.remove(this.polygonList);
        this.map.remove(this.textList);
      }
      let mapLine = this.dw.map((item) => {
        return [item.lng, item.lat];
      });
      this.polygonList= new AMap.Polygon({
        map: this.map,
        path: mapLine,
        strokeColor: "#2bb573",
        strokeWeight: 5,
        strokeOpacity: 0.5,
        fillOpacity: 0.3,
        fillColor: `#409EFF`,
        zIndex: 50,
        bubble: true,
      });
      console.log(this.onlineNumber,'this.onlineNumber');
      this.textList= new AMap.Text({
        map: this.map,
        text: `在线人数:${this.onlineNumber}人`,
        anchor: "center", // 设置文本标记锚点
        style: {
          "text-align": "center",
          "font-size": "16px",
          "background-color": "#0b2159",
          "z-index": 1,
          color: "#fff",
        },
        position: this.getCenter(mapLine),
      });
    },
  },
};
</script>
<style>
#map {
  width: 100%;
  height: 100%;
}
.amap-icon > img {
  width: 100%;
  height: 100%;
}
.amap-info-content {
  background-color: #0b2159;
}
.map-bubble {
  width: 230px;
  font-size: 15px;
  background-color: #0b2159;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bubble-left > img {
  width: 60px;
  height: 85px;
}
.bubble-rigth {
  width: calc(100% - 70px);
}
.amap-info-sharp {
  border-top: 8px solid #0b2159 !important;
}
</style>
